<template>
  <div>
    <div class="select-box-con">
      <div class="box-head">
        <h1></h1>
        <img class="box-close" src="@/assets/images/close.png" @click="close" alt=""/>
      </div>
      <div class="box-main">
        <div class="box-main-item-down">
          <img src="@/assets/images/waiting.svg">
        </div>
        <div class="box-main-text">
          <div>Waiting for confimation</div>
<!--          <div>Swapping 1 MATIC for 0.92552 USDC</div>-->
          <div>confirm this transaction in your wallet</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: `step1`,
  methods: {
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>

.select-box-con {
  position: fixed;
  width: 300px;
  height: 270px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}
.box-head{
  border-bottom:0px;
}
.box-main-item-down{
  text-align: center;
}
.box-main-item-down img{
  width: 80px;
  height: 80px;
  margin: 5px auto 0px auto;
  top: 50%;
  animation-name: re;
  animation-duration: 2s;
  animation-fill-mode: revert;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes re{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
.box-main-text {
  padding: 10px 10px;
  font-family: "Helvetica Neue", Helvetica;
  align-items: center;
  border-radius: 2px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.box-main-text div{
  margin: 5px 0;
  font-weight: bold;
}
.box-main-text div:last-child{
  font-size: 12px;
  color: rgba(108, 108, 108, 0.54);
}

</style>
